import React, { useState } from 'react';
import { Table, Tag, Space, Button, Form, Switch, Input, Modal, message } from 'antd';
import { useApi } from '@/hooks/useApi';
import { addTable, deleteTable, fetchList } from '@/api/table';



interface TableProps {
    name: string;
    desc: string;
    createTime: string;
    status: string;
    _id: string;
}

const columns = [
    {
        title: '表名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc',
    },

    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
    },
    {
        title: '状态',
        key: 'status',
        render: (text: TableProps, record: TableProps) => (
            <Tag color={text.status ? '#108ee9' : '#f50'}> {text.status ? '启用' : '禁用'} </Tag>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (text: TableProps, record: TableProps) => {
            const deleteItem = async () => {
                const res = await deleteTable(text);
                if (res.code !== 0) return message.error(res.msg);
                message.success("删除成功");
                useApi(fetchList, 1);
            }
            return <Space size="middle">
                <a onClick={deleteItem}>删除</a>
            </Space>
        }
        ,
    },
];
const TableList: React.FC = () => {
    const [show, setShow] = useState(false);
    const [form] = Form.useForm();
    const [key, setKey] = useState(0);
    const [data, setData] = useApi(fetchList, key);
    // 获取数据
    const handleOk = () => {
        form.submit();
    }

    const onFinish = async (values: TableProps) => {
        const res = await addTable(values);
        if (res.code !== 0) return message.error(res.msg);
        message.success("保存成功");
        setShow(false);
        setKey(key + 1);
    }

    const onFinishFailed = () => {

    }
    return (
        <div>
            <div className='btn'>
                <Button type='primary' onClick={() => setShow(true)}>创建表</Button>
            </div>
            <Table columns={columns} dataSource={data} />

            <Modal title="创建表" visible={show} onOk={handleOk} onCancel={() => setShow(false)}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="表名"
                        name="name"
                        rules={[{ required: true, message: '请输入表名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="status"
                        valuePropName="checked"
                        rules={[{ required: true, message: '请选择是否启用!' }]}
                    >
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                    </Form.Item>
                    <Form.Item
                        label="表描述"
                        name="desc"
                        rules={[{ required: true, message: '请输入表描述!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}


export default TableList; 
